import { init } from "snabbdom/build/package/init.js";
import { classModule } from "snabbdom/build/package/modules/class.js";
import { propsModule } from "snabbdom/build/package/modules/props.js";
import { styleModule } from "snabbdom/build/package/modules/style.js";
import { eventListenersModule } from "snabbdom/build/package/modules/eventlisteners.js";
import { h } from "snabbdom/build/package/h.js";
import { _data, originalData } from "./data";

const patch = init([
  classModule,
  styleModule,
  eventListenersModule,
  propsModule,
]);

let sortType = "rank";
let vnode,
  data = _data,
  totalHeight = 0,
  margin = 8,
  nextIndex = 11;

// 增删改的操作
const onSort = (value) => {
  sortType = value;
  data.sort((a, b) => {
    if (a[value] > b[value]) {
      return 1;
    } else if (a[value] < b[value]) {
      return -1;
    } else {
      return 0;
    }
  });
  render();
};

const onAdd = () => {
  const addData = originalData[parseInt(Math.random() * 10)];
  data.unshift({ ...addData, rank: nextIndex++ });
  render();
};

const onDelete = (index) => {
  data.splice(index, 1);
  render();
};

const movieView = (movie, index) => {
  return h(
    "div.row",
    {
      key: movie.rank,
      style: {
        opacity: "0",
        transform: "translate(-200px)",
        delayed: { transform: `translateY(${movie.offset}px)`, opacity: "1" },
        remove: {
          opacity: "0",
          transform: `translateY(${movie.offset}px) translateX(200px)`,
        },
      },
      hook: {
        // 动画的核心:
        // 最开始给每个 row 设置 elmHeight, 方便在 render 中计算 offset 的值
        insert: (vnode) => {
          movie.elmHeight = vnode.elm.offsetHeight;
        },
      },
    },
    [
      h("span.rowElme.rank", movie.rank),
      h("span.rowElme.title", movie.title),
      h("span.rowElme.desc", movie.desc),
      h("span.rowElme.delete", { on: { click: () => onDelete(index) } }, "X"),
    ]
  );
};

const view = (data) => {
  return h("div.wrap", [
    h("h1", "Top 10 movies"),
    h(
      "div.buttonWrap",
      {
        style: {
          width: "1000px",
          margin: "0 auto",
        },
      },
      [
        "Sort By: ",
        h(
          "span.button",
          {
            class: { active: sortType === "rank" },
            on: { click: () => onSort("rank") },
          },
          "Rank"
        ),
        h(
          "span.button",
          {
            class: { active: sortType === "title" },
            on: { click: () => onSort("title") },
          },
          "Title"
        ),
        h(
          "span.button",
          {
            class: { active: sortType === "desc" },
            on: { click: () => onSort("desc") },
          },
          "Description"
        ),
        h(
          "span.button.add",
          {
            class: { active: sortType === "Add" },
            on: { click: () => onAdd("Add") },
          },
          "Add"
        ),
      ]
    ),
    h(
      "div.list",
      { style: { height: totalHeight + "px" } },
      data.map(movieView)
    ),
  ]);
};

const render = () => {
  data = data.reduce((acc, m) => {
    var last = acc[acc.length - 1];
    m.offset = last ? last.offset + last.elmHeight + margin : margin;
    return acc.concat(m);
  }, []);
  totalHeight =
    data.length === 0
      ? 0
      : data[data.length - 1].offset + data[data.length - 1].elmHeight;
  vnode = patch(vnode, view(data));
};

window.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("container");
  vnode = patch(container, view(data));
  render();
});
